<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import List from "./List.svelte";
    import { ListItem } from ".";
    import { Avatar } from "../Avatar";
    import img from "../../assets/avatar.png";
    import { Space } from "../Space";
    import { Button } from "../Button";

    const { Story } = defineMeta({
        title: "Components/Layout/List",
        component: List,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        {@const data = [
            { id: "1", desc: "这是一段文本。", content: "" },
            { id: "2", desc: "这是一段文本。", content: "" },
            { id: "3", desc: "这是一段文本。", content: "" },
        ]}
        <List
            border
            selectable
            onselect={(item: any) => {
                console.log(item);
            }}
            head="Header"
            foot="Footer"
        >
            {#each data as item}
                <ListItem id={item.id} desc={item.desc} data={item}>
                    {item.content}
                </ListItem>
            {/each}
        </List>
    {/snippet}
</Story>

<Story name="Small">
    {#snippet template(args)}
        {@const data = [
            { id: "1", desc: "这是一段文本。", content: "" },
            { id: "2", desc: "这是一段文本。", content: "" },
            { id: "3", desc: "这是一段文本。", content: "" },
        ]}
        <List size="small" border head="Header" foot="Footer">
            {#each data as item}
                <ListItem id={item.id} desc={item.desc} data={item}>
                    {item.content}
                </ListItem>
            {/each}
        </List>
    {/snippet}
</Story>

<Story name="Complex">
    {#snippet template(args)}
        {@const data = [
            { id: "1", desc: "这是一段文本。", content: "" },
            { id: "2", desc: "这是一段文本。", content: "" },
            { id: "3", desc: "这是一段文本。", content: "" },
        ]}
        <List size="small" border head="Header" foot="Footer">
            {#each data as item}
                <ListItem id={item.id} title="Title" desc={item.desc} data={item}>
                    {#snippet avatar()}
                        <Avatar src={img} />
                    {/snippet}
                    {#snippet actions()}
                        <Space>
                            <Button
                                theme="borderless"
                                size="small"
                                onclick={() => {
                                    console.log(item);
                                }}>Edit</Button
                            >
                            <Button theme="borderless" size="small">More</Button>
                        </Space>
                    {/snippet}
                    具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容 具体内容具体内容具体内容具体内容具体内容具体内容 具体内容具体内容具体内容具体内容
                </ListItem>
            {/each}
        </List>
    {/snippet}
</Story>
